<template>
  <div class="chartCard">
    <svg width="11" height="10" viewBox="0 0 11 10" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect x="0.501953" y="5" width="7.07011" height="7.07011" transform="rotate(-45 0.501953 5)" fill="#3A8FFF" />
    </svg>
    <span style="white-space: nowrap;">数据标准类别情况</span>
    <Tabs :tabs="tabsList" @tabClick="handleTabClick" />
  </div>
  <div style="display: flex;margin-left: 10px;" v-if="tabIndex == 0">
    <div class="box">
      <div style="width: 48%;height: 87px">
        <mpie2 wztext="数据标准条数" :xdata="sjbzsdata" :flag="true"></mpie2>
      </div>
      <div style="width: 48%;height: 87px">
        <mpie2 wztext="数据标准覆盖率" :xdata="sjbzfgldata"></mpie2>
      </div>
      <div style="width: 48%;height: 87px;margin-top: 10px">
        <mpie2 wztext="数据标准落标率" :xdata="sjbzlbldata"></mpie2>
      </div>
      <div style="width: 48%;height: 87px;margin-top: 10px">
        <mpie2 wztext="数据标准合格率" :xdata="sjbzhgldata"></mpie2>
      </div>
    </div>
    <div class="box-right">
      <mpie3 :xdata="lblist"></mpie3>
    </div>
  </div>
  <div v-if="tabIndex == 1" class="box-q">
    <div class="box-bz">
      <div class="box-bz-header">
        <div class="box-bz-header-bz"></div>
        <div class="fz12" style="margin-left: 6px">数据标准条数</div>
        <div class="box-bz-header-text">{{ cklbs }} 个</div>
      </div>
      <mbar6 :xdata="bzlist"></mbar6>
    </div>
    <div class="box-yq">
      <div class="box-yq-content">
        <div class="box-yq-content-left">{{ sjbzsdata }}</div>
        <div class="box-yq-content-right">
          <div style="white-space: nowrap;">数据标准</div>
          <div style="white-space: nowrap;">条数（条）</div>
        </div>
      </div>
      <div class="box-yq-content">
        <div class="box-yq-content-left">{{ sjbzfgldata }}</div>
        <div class="box-yq-content-right">
          <div style="white-space: nowrap;">数据标准</div>
          <div style="white-space: nowrap;">覆盖率（%）</div>
        </div>
      </div>
      <div class="box-yq-content">
        <div class="box-yq-content-left">{{ sjbzlbldata }}</div>
        <div class="box-yq-content-right">
          <div style="white-space: nowrap;">数据标准</div>
          <div style="white-space: nowrap;">落标率（%）</div>
        </div>
      </div>
      <div class="box-yq-content">
        <div class="box-yq-content-left">{{ sjbzhgldata }}</div>
        <div class="box-yq-content-right">
          <div style="white-space: nowrap;">数据标准</div>
          <div style="white-space: nowrap;">合格率（%）</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Tabs from "@/components/tabs/index.vue";
import mpie2 from './charts/mpie2.vue'
import mpie3 from './charts/mpie3.vue'
import {
  GETcount, GETcoverage, GETfallRate, GETpassRate,
  GETreferenceDataCount, GETreferenceDataCountTwo, GETdataStandardSetcountTwo
  , GETdataStandardSetcountsBiaoZunTwo
} from '@/api/DAtastandard.js'
import mbar6 from './charts/mbar6.vue'
const tabsList = [
  { title: "数据标准类别", value: 1 },
  { title: "数据标准变化", value: 2 },
];
let tabIndex = ref(0);
const sjbzsdata = ref(0)
const sjbzfgldata = ref(0)
const sjbzlbldata = ref(0)
const sjbzhgldata = ref(0)
const cklbs = ref(0)
const lblist = ref([])
const bzlist = ref({
  xdata: [],
  ydata: []
})
const handleTabClick = (index) => {
  tabIndex.value = index
  if (index == 0) {
    getlist()
  } else {
    getlist2()
  }
};
const getlist = () => {
  GETdataStandardSetcountTwo().then(res => {
    console.log(res, '1111111111111111');

    let arr = []
    res.data.forEach(item => {
      let obj = {}
      obj.name = item.name
      obj.value = item.value
      arr.push(obj)
    })
    lblist.value = arr
  }).catch(err => {
    lblist.value = [
      { value: 5301, name: '项目', },
      { value: 2205, name: '人员', },
      { value: 1032, name: '企业', }
    ]
  })
  GETcount().then(res => {
    sjbzsdata.value = res.data.count
  })
  GETcoverage().then(res => {
    sjbzfgldata.value = parseFloat(parseFloat(res.data.value.replace(/%/g, "")).toFixed(2))
    sjbzfgldata.value = 1
  })
  GETfallRate().then(res => {
    sjbzlbldata.value = parseFloat(parseFloat(res.data.value.replace(/%/g, "")).toFixed(2))
    sjbzlbldata.value = 5.2
  })
  GETpassRate().then(res => {
    sjbzhgldata.value = parseFloat(parseFloat(res.data.value.replace(/%/g, "")).toFixed(2))
    sjbzhgldata.value = 22.1
  })
  GETdataStandardSetcountTwo().then(res => {

  })
}
const getlist2 = () => {
  GETdataStandardSetcountsBiaoZunTwo().then(res => {
    let arr = []
    let arr2 = []
    res.data.forEach(item => {
      arr.push(item.name)
      arr2.push(item.value)
    })
    bzlist.value.xdata = arr
    bzlist.value.ydata = arr2
  }).catch(err => {
    bzlist.value.xdata = ['一季度', '二季度', '三季度', '四季度']
    bzlist.value.ydata = [400, 500, 500, 500, 500, 400, 400, 500, 500]
  })
  GETreferenceDataCount().then(res => {
    cklbs.value = res.data.count
  }).catch(err => {
    cklbs.value = 103
  })
  GETcount().then(res => {
    sjbzsdata.value = res.data.count
  })
  GETcoverage().then(res => {
    sjbzfgldata.value = parseFloat(parseFloat(res.data.value.replace(/%/g, "")).toFixed(2))
    sjbzfgldata.value = 1
  })
  GETfallRate().then(res => {
    sjbzlbldata.value = parseFloat(parseFloat(res.data.value.replace(/%/g, "")).toFixed(2))
    sjbzlbldata.value = 5.2
  })
  GETpassRate().then(res => {
    sjbzhgldata.value = parseFloat(parseFloat(res.data.value.replace(/%/g, "")).toFixed(2))
    sjbzhgldata.value = 22.1
  })
}
onMounted(() => {
  getlist()
})
</script>

<style lang="scss" scoped>
.chartCard {
  display: flex;
  align-items: center;
  padding: 0px 0 0px 10px;

  span {
    display: inline-block;
    color: #fff;

    margin-left: 10px;
    font-size: 16px;
  }
}

.box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 230px;
  height: 175px;
}

.box-right {
  width: 327px;
  height: 180px;
  margin-left: 48px;
}

:deep(.tabs-header) {
  justify-content: end;
  margin-right: 20px;
}

.box-bz {
  width: 250px;
}

.box-bz-header {
  display: flex;
  align-items: center;
}

.box-bz-header-bz {
  width: 23px;
  height: 23px;
  background-image: url("../../../static/BGscreenLeft/bz.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.box-bz-header-text {
  font-size: 24px;
  font-weight: 700;
  color: #37C9C9;
  margin-left: 12px;
}

.fz12 {
  font-size: 12px;
}

.box-q {
  display: flex;
  justify-content: space-between;
  margin-left: 10px;
}

.box-yq {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  width: 340px;
  margin-right: 10px;
}

.box-yq-content {
  display: flex;
  width: 170px;
  height: 70px;
}

.box-yq-content-left {
  width: 70px;
  height: 100%;
  text-align: center;
  line-height: 70px;
  font-size: 20px;
  background-image: url("../../../static/BGscreenLeft/yq.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.box-yq-content-right {
  margin-left: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>
